<!--  -->
<template>
<div class='loginbj'>
    <!-- 登录盒子 -->
    <div class='login-box'>
        <!-- 子盒子 -->
        <div class='log-box'>
             <!-- 左边图片 -->
            <div class='log-r clearfix'></div>
            <!-- 右边输入框 -->
            <div class='log-l'>
                <!-- 标题部分 -->
                <div class='log-tit'>
                    <h1>登录</h1>
                    <h6>非翔教育后台管理系统</h6>
                </div>
                <!-- 表单内容 -->
                    <div class='log-input'>
                        <!--用户名 -->
                        <div class='inp-img'>
                            <img id="u138_img" class="img " src="../assets/u138.png">
                            <input v-model="textinput" placeholder="管理员用户名" type='text'></input>
                        </div>
                        <!-- 密码 -->
                        <div class='inp-img'>
                            <img id="u142_img" class="img " src="../assets/u142.png">
                            <input placeholder="密码" v-model="passwordinput" type='password'></input>
                        </div>
                        <p>
                            <!-- 勾选框 -->
                            <div class='ax_default'>
                                <template>
                                <!-- `checked` 为 true 或 false -->
                                       <el-checkbox v-model="checked"></el-checkbox>
                                </template>
                                <span class='mian-login'>一个月免登录</span>
                                <span class='wangji'>忘记密码请联系管理员</span >
                            </div>
                            <template>
                                <button   @click="open4" class='gologin'>登录</button>
                            </template>        
                        </p>
                    </div>
                    <el-dialog
                    title="提示"
                    :modal-append-to-body='false'
                    :visible.sync="centerDialogVisible"
                    width="30%"
                    center>
                    <span>是否继续登录</span>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="centerDialogVisiblefn(1)">取 消</el-button>
                        <el-button type="primary" @click="centerDialogVisiblefn(2)">确 定</el-button>
                    </span>
                    </el-dialog>
            </div>
        </div>
    </div>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
    textinput:'',
    passwordinput:'',
    checked: true,
    pand:false,
    youID:"",
    centerDialogVisible: false
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
   centerDialogVisiblefn(num){
       if(num==1){
           this.centerDialogVisible = false
           
       }else{
           this.centerDialogVisible = false
           this.$router.push({path:'/home'})
       }
   },
   open4() {
           //跳转路由
        this.$message({
          showClose: true,
          message: '管理员信息正在匹配，请稍后',
          type: 'success'
        });
        setTimeout(() => {
            this.$axios.get('data/login.json').then((res)=>{
                res.forEach(itme => {
                    if(itme.user==this.textinput){
                        if(itme.pass==this.passwordinput){
                            this.pand=true
                            this.youID=itme.id
                        }
                    }
                });
                if(!this.pand){
                    this.$message.error('用管理员户名或密码错误')
                }else{
                    if(this.checked){
                        //设置时间
                        var d = new Date();
                        d.setTime(d.getTime() + (30*24*60*60*1000));
                        var expires = d.toUTCString();
                        console.log(expires);
                        document.cookie=`fxjy=${this.youID};expires='${expires}';path='/'`
                        
                    }else{
                        document.cookie=`fxjy=${this.youID};expires='';path='/'`
                    }
                    this.$router.push({path:'/home'})
                }
            })
        
        }, 1000);
      
    }
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
   // 获取cookie
    let text = document.cookie
    // 筛选
    // if(text==''){
    //     return
    // }
    text =text.split(';')
    for(let i in text){
        //断开去除空格
        let arrnoe = text[i].split('=')
        let str = arrnoe[0].replace(/\s*/g,"")

        //判断有没有非常教育
        if(str=='fxjy'){
             this.$axios.get('data/login.json').then((res)=>{
                  res.forEach(itme => {
                    if(itme.id==arrnoe[1]){
                        this.textinput=itme.user
                        this.passwordinput=itme.pass
                        this.centerDialogVisible=true
                        // this.$message({
                        // showClose: true,
                        // message: '即将登录，请稍后',
                        // type: 'success'
                        // });
                        setTimeout((function() {
                                        
                            // this.$router.push({path:'/home'})
                        }),2000)
                        
                    }
                });
             })
            // this.$router.push({path:'/home'})
        }
        
    }
    
},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {
}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style  scoped>
.loginbj{
    width:100%;
    height:100%;
    position:relative;
    background:url(../assets/loginbg.png) no-repeat;
}
.login-box{
    position: fixed;
    left: 50%;
    margin-left: -350px;
    top: 50%;
    margin-top: -203px;
    width:700px;
    height:406px;
}
.mian-login,.wangji{
    font-size:12px;
    color:#000;
    margin-left:10px;

}
.wangji{
    text-align:right;
    color:#ccc;
    margin-left:35px;
   cursor: pointer
    
}
.log-box{
    position: relative;
    left: 0px;
    top: 0px;
    width: 700px;
    height: 406px;
    background: #fff;
    border-radius:8px;
    font-size:0px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, .35);
}
.log-r{
    float:left;
    
    width:390px;
    height:100%;
    background:url(../assets/Snipaste_login.png) no-repeat center center;
}
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
}
.clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

.log-l{
    float:left;
    
    font-size:14px;
    width:260px;
    height:100%;
}
.log-tit{
    height:140px;
    padding-top:33px;
    box-sizing:border-box;
    text-align:center;
}
.log-tit>h1{
    font-size: 28px;
    color: #9933FF;
    line-height:50px;
}
.log-tit>h6{
    color: #9933FF;
}
input{
    width:260px;
    height:44px;
    border-radius:8px;
    border:2px #f5ebff solid;
    background:#f5ebff;
    padding-left:40px;
    margin-bottom:12px;
}
input:focus{
    outline: none; 
    border:2px solid #9137f3;
}
.ax_default{
        line-height:14px;
        margin-bottom:24px
}
.gologin{
    width:260px;
    height:44px;
    background:#9137f3;
    box-shadow:2px 2px 20px #9137f3;
    color:#fff;
    border:none;
    outline:none;
    border-radius:6px;
    cursor: pointer;
}
.inp-img{
    position:relative;
}
.inp-img>.img{
    position:absolute;
    top:12px;
    left:14px;
}
</style>